<template>
  <div>
    <Modal
      v-model="isShowModal"
      :title="title"
      @on-cancel="hide()"
      :mask-closable="false"
      width="950"
    >
    <Card >
      <p slot="title">
        基本信息
    </p>
    <ul class="listCon">
      <li v-for="(item,index) in baseInfo" :key="index">
        <div v-if="!item.notImmediate">{{item.label}}:<span>{{getKeyVal(item.key,orderData)}}</span></div>
        <div v-else="item.notImmediate">
           <p v-if="item.key=='warnState'">
            {{item.label}}:<span><Tag color="red">{{getKeyVal(item.key,orderData) | warnState}}</Tag></span>
           </p>
           <p v-if="item.key=='plantType'">
            {{item.label}}:<span>{{getKeyVal(item.key,orderData) | plantType}}</span>
           </p>
           <p v-if="item.key=='orderState'">
            {{item.label}}:<span>{{getKeyVal(item.key,orderData) | orderState}}</span>
           </p>
        </div>
      </li>    
    </ul>
    
  </Card>
  <Card >
    <p slot="title">
      地址信息
  </p>
  <ul class="listCon">
    <li  v-for="(item,index) in addressInfo" :key="index" :style="{'width':item.cols ? item.cols+'%':'20%'}">
      <div v-if="!item.notImmediate">{{item.label}}:<span>{{getKeyVal(item.key,orderData)}}</span></div>     
    </li>    
  </ul>
  
</Card>
<Card >
  <p slot="title">
    物流信息
</p>
<ul class="listCon">
  <li  v-for="(item,index) in logisticsInfo" :key="index">
    <div v-if="!item.notImmediate">{{item.label}}:<span>{{getKeyVal(item.key,orderData)}}</span></div>
    <div v-else="item.notImmediate">
        <p @click="seeLogistics(1,getKeyVal('backWayBillNo',orderData))" v-if="item.label=='查看取件物流详情'" style="cursor: pointer;color: blue;">查看取件物流详情</p>
        <p  @click="seeLogistics(2,getKeyVal('takeWayBillNo',orderData))"  v-if="item.label=='查看送件物流详情'" style="cursor: pointer;color: blue;">查看送件物流详情</p>
    </div>
  </li>    
</ul>

</Card>
<Card >
  <p slot="title">
    衣物详情
</p>

<Table :columns="clothingColums" :data="orderData.clothesList" size="small"  :max-height="300">  
  <template slot-scope="{ row, index }" slot="attaches">
      <p>{{row.attaches  | rowAttaches}}</p>
  </template>
  <template slot-scope="{ row, index }" slot="attachesNumber">
    <p>{{row.attaches  | attachesNumber}}</p>
</template>
<template slot-scope="{ row, index }" slot="attachCode">
  <p>{{row.attaches  | attachCode}}</p>
</template>
<template slot-scope="{ row, index }" slot="picDetail">

  <img @click="picDetail(orderData.imgBaseUrl+item)" style="width: 30px;margin-left: 10px;" v-for="item in row.imgUrls" :src="orderData.imgBaseUrl+item" alt="">
<!-- 
  <p v-if="row.imgUrls.length!=0" style="cursor: pointer;color: blue;" @click="picDetail(row)">查看</p>
  <p v-else style="cursor: pointer;color: #eee;" >查看</p> -->

</template>
</Table>

</Card>
<Card >
  <p slot="title">
    异常反馈
</p>
<ul class="listCon">
  <li  v-for="(item,index) in abnormalInfo" :key="index" :style="{'width':item.cols ? item.cols+'%':'20%'}">
    <div v-if="!item.notImmediate">{{item.label}}:<span>{{getKeyVal(item.key,orderData)}}</span></div>
    <div v-else="item.notImmediate">
       <p v-if="item.key=='warnState'">
        {{item.label}}:<span>{{getKeyVal(item.key,orderData) | warnState}}</span></span>
       </p>
       <p v-if="item.key=='dealState'">
        {{item.label}}:<span>{{getKeyVal(item.key,orderData) | dealState}}</span></span>
       </p>
    </div>
  </li>    
</ul>
<Table :columns="abnormalColums" :data="warnClothesList" size="small" :stripe="true" :loading="isTableLoading" :max-height="300">
</Table>

</Card>
<Card >
  <p slot="title">
    工厂备注/补充说明
</p>
<Card  >
  <ul class="listCon">
    <li style="width: 100%;">
      <p>工厂备注：<span>{{orderData.warnNote || ''}}</span> </p>
     
    </li> 
    <!-- <li style="width: 100%;">
      <p>补充说明：<span></span></p>
     
    </li>     -->
  </ul>
 
</Card>
</Card>
<Card >
  <p slot="title">
    运营备注/补充说明
</p>
<Card>
  <ul class="listCon">
    <li style="width: 100%;">
      <p>运营备注： <span>{{orderData.dealNote || ''}}</span></p>     
    </li> 
    <!-- <li style="width: 100%;">
      <p>补充说明：<span>{{orderData.warnNote || ''}}</span></p>     
    </li>     -->
  </ul>
 
</Card>
</Card>
<Card >
  <p slot="title">
    订单日志
</p>
<ul class="listCon">
  <li  v-for="(item,index) in orderLog" :key="index">
    <div v-if="!item.notImmediate">{{item.label}}:<span>{{getKeyVal(item.key,orderData)}}</span></div>
   
  </li>    
</ul>

</Card>
      <!-- <Divider orientation="center">地址信息</Divider>
      <Row :gutter="16">
        <Col span="12">
          <div>取件联系人：{{ orderInfo.orderMall.takeMan }}</div>
        </Col>
        <Col span="12">
          <div>取件联系电话：{{ orderInfo.orderMall.takePhone }}</div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
          <div>
            取件地址：
            {{ orderInfo.orderMall.takeProvince }}
            {{ orderInfo.orderMall.takeCity }}
            {{ orderInfo.orderMall.takeCounty }}
            {{ orderInfo.orderMall.takeAddress }}
          </div>
        </Col>
      </Row>

      <Row :gutter="16">
        <Col span="12">
          <div>送衣联系人：{{ orderInfo.orderMall.backMan }}</div>
        </Col>
        <Col span="12">
          <div>送衣联系电话：{{ orderInfo.orderMall.backPhone }}</div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
          <div>
            送衣地址：
            {{ orderInfo.orderMall.backProvince }}
            {{ orderInfo.orderMall.backCity }}
            {{ orderInfo.orderMall.backCounty }}
            {{ orderInfo.orderMall.backAddress }}
          </div>
        </Col>
      </Row>
      <Divider orientation="center">物流信息</Divider>
      <Row :gutter="16">
        <Col span="12">
          <div>取件物流：{{ orderInfo.sendLogistics.logisticsName }}</div>
        </Col>
        <Col span="12">
          <div>
            取件物流状态：
            <template v-if="orderInfo.sendLogistics.state == 1">
              待取件
            </template>
            <template v-if="orderInfo.sendLogistics.state == 2">
              运输中
            </template>
            <template v-if="orderInfo.sendLogistics.state == 3">
              确认收货
            </template>
          </div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="24">
          <div>取件物流单号：{{ orderInfo.sendLogistics.logisticsNum }}</div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
          <div>收件物流：{{ orderInfo.backLogistics.logisticsName }}</div>
        </Col>
        <Col span="12">
          <div>
            取件物流状态：
            <template v-if="orderInfo.backLogistics.state == 1">
              待取件
            </template>
            <template v-if="orderInfo.backLogistics.state == 2">
              运输中
            </template>
            <template v-if="orderInfo.backLogistics.state == 3">
              确认收货
            </template>
          </div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="24">
          <div>收件物流单号：{{ orderInfo.backLogistics.logisticsNum }}</div>
        </Col>
      </Row>

      <Divider orientation="center">工厂备注</Divider>
      <Row :gutter="16">
        <Col span="24">
          <div>{{ orderInfo.orderMall.factoryRemark }}</div>
        </Col>
      </Row>
      <Divider orientation="center">运营备注</Divider>
      <Row :gutter="16">
        <Col span="24">
          <Input type="textarea" v-model="orderInfo.orderMall.operateRemark" placeholder="运营备注"></Input>
        </Col>
      </Row> -->
      <!-- 重写对话框底部按钮 -->
      <div slot="footer">
        <Button @click="hide('formValidate')">取消</Button>
        <Button @click="confirm" type="primary">确定</Button>
      </div>
      <Drawer class-name="logisticsDrawer" width="500px" :title="logisticsTitle" v-model="logisticsFlag">
        <Timeline>
          <TimelineItem v-for="item in logisticsTimeLine">
              <p class="time">{{item.acceptTime}}</p>
              <p class="content">{{item.remark}}</p>
              <p class="content">{{item.acceptAddress}}</p>
          </TimelineItem>       
      </Timeline>
    </Drawer>
    </Modal>
    <Modal
    v-model="picFlag"
    :title="'查看图片'"
   
    :mask-closable="true"
    width="950"
  >
  <!-- <Carousel   style="width: 100%;height: 100%;">
    <CarouselItem v-for="item in picList"> -->
       <img  style="width:100% ;" :src="imgUrl" alt="">
    <!-- </CarouselItem> -->
   
</Carousel>
  </Modal>


  </div>
</template>

<script>
import orderDetail from "../mixin/orderDetail.js";

  export default {
    name: 'order-ope',
    mixins: [orderDetail],
    data() {
      return {
        isTableLoading:false,
        logisticsFlag:false,
        isShowModal: false,
        loadingBtn: false,
        picFlag:false,
        logisticsTitle:'',
        orderData: {
        
        },
        imgUrl:"",
        warnClothesList:[],
        logisticsTimeLine:[],
        picList:[],
        goodsSkuInfo: {},
        title: '订单详情'
      };
    },
    methods: {
      // 显示模态框
      show(row) {
        this.getOrderMallById(row);
      },
      // 查询订单详情
      getOrderMallById(row) {
        this.$Spin.show();
        this.axios
          .get('/orderMall/orderDetail', {
            params: { orderCode:row.mallOrderCode }
          })
          .then(res => {
            debugger
            this.isShowModal = true;

          // let res  = this.orderInfo
            setTimeout(() => {
                    this.$Spin.hide();
            }, 300);
            // res.data.sendLogistics = res.data.sendLogistics || {};
            // res.data.backLogistics = res.data.backLogistics || {};
            let obj = {
              backDeliveryName:res.data?.deliveries?.backDelivery?.deliveryName || '--',
              backWayBillNo:res.data?.deliveries?.backDelivery?.wayBillNo || '--',
              backState:res.data?.deliveries?.backDelivery?.state || '--',
              takeDeliveryName:res.data?.deliveries?.takeDelivery?.deliveryName || '--',
              takeWayBillNo:res.data?.deliveries?.takeDelivery?.wayBillNo || '--',
              takeState:res.data?.deliveries?.takeDelivery?.state || '--',
            }
            this.warnClothesList = []
            res.data.clothesList.map(data=>{
              if(data.warnState>0){
                this.warnClothesList.push(data)
              }
            })
            this.orderData={
              ...res.data,
              ...obj
            }
            console.log(this.orderData.dealState)
            // if (!this.orderInfo.voucher) {
            //   this.orderInfo.voucher = {}
            // }
          }).catch(err=>{
            debugger
            this.$Message.error('系统内部错误，请稍后再试！')
          });
      },
      // 关闭模态框
      hide() {
        this.isShowModal = false;
      },
      confirm() {
        this.axios
          .post('/orderMall/operateRemark', {
            orderCode: this.orderInfo.orderMall.mallOrderCode,
            operateRemark: this.orderInfo.orderMall.operateRemark
          }).then(res => {
            console.log(res)
            this.hide()
          })
      },
      // 查看图片
      picDetail(row){
        this.picList = []
        // row.imgUrls.map(data=>{
        //   this.picList.push(this.orderData.imgBaseUrl+data)
        // })
        this.imgUrl = row
        this.picFlag = true

      },
      seeLogistics(type,wayBillNo){
        if(wayBillNo=='--'){
          return  this.$Message.error('暂无物流信息')
        }
        this.axios
          .get('/orderMall/getDeliveryRouters', {
            params: { wayBillNo: wayBillNo,    }
                    
          }).then(res => {
            this.logisticsTimeLine = res.data.routes
            this.logisticsFlag =true
            if(type==1){//取件物流
                this.logisticsTitle='取件物流信息'
            }else{//送件物流
              this.logisticsTitle='送件物流信息'


            }


          })
       
      }
    }
  };
</script>

<style scoped lang="less">
  ::v-deep .ivu-card{
    margin-top: 10px;
  }
  ::v-deep .logisticsDrawer{
    z-index: 999999!important;
  }
  ::v-deep .ivu-modal-body{
    height: calc(100vh - 250px);
    overflow-y: scroll;

  }
  ::v-deep .ivu-modal-body::-webkit-scrollbar{
  width: 1px;

  }
  /deep/.ivu-row {
    margin-bottom: 5px;
  }
  .listCon{
    width: 100%;
    li{
      list-style: none;
      width: 25%;
      height: 30px;
      line-height: 30px;
      display: inline-block;

    }
  }
  .j-order-image {
    display: flex;

    .j-order-image-main {
      width: 130px;
      height: 130px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .j-order-image-info {
      margin-left: 10px;

      .j-order-goods-sku {
        margin-top: 5px;
      }

      .j-order-goods-price {
        margin-top: 5px;
      }

      .j-order-goods-num {
        margin-top: 5px;
      }
    }
  }
</style>
